var action;
function mostrarJSON(data){
/*Mostrar el JSON que nos devuelve campus-cloud-server-rb*/
        
        //Borramos el contenedor central para mostrar los datos.
        $('#container').empty();
        
        //Variable en la almacenaremos el codigo html que se insertara al en el contenedor central
        var html='';
        	
        //Comprobamos si la BD nos ha devuelto una consulta vacia
        if(!$.isEmptyObject(data)){
		html+= '<table id="table_id">';
			switch (action){
				case 'profile':
				//falta darle funcionalidadddddddddddddd	
				break;
			
				case 'list':
					html+='<thead>';
						html+='<tr>';
							html+='<th style="background:#ffffff"></th>';
							html+='<th>NAME</th>';
							html+='<th>GROUP</th>';
							html+='<th>LAB DESCRIPTION</th>';
							html+='<th>TEMPLATE DESCRIPTION</th>';
							html+='<th>TEACHER</th>';
						html+='</tr>';
					html+='</thead>';
					html+='<tbody>';
                
					//Recorremos el JSON objeto por objeto
					$.each(data, function(key, val) {
						html+='<tr>';
						html+= '<td><input type="checkbox" name="chk" value="'+val.lab_id+','+val.lab_name+'"/></td>';
						html+= '<td>'+ val.lab_name +'</td>';
						html+= '<td>'+ val.lab_group +'</td>';
						html+= '<td>'+ val.lab_description +'</td>';
						html+= '<td>'+ val.template_description +'</td>';
						html+= '<td>'+ val.surname+', '+val.name +'</td>';
						html+='</tr>';
					});
					html+='</tbody>';
                			html+= '</table>';
					html+='<br><input type="button" id="createButton" class="button" value="Enter Lab" onClick="enterLab()"/>';
				break;
			}
 
	}

        //Si nuestra consulta nos ha devuelto un JSON vacio (es decir, nil) mostramos un aviso
        else
	{ 
                html+= 'The are no data to show';
        }
                        
        //Insertamos en el contenedor central el codigo html definitivo que hemos generado tras analizar el JSON devuelto en la consulta
        $('#container').append(html);
	$('#table_id').dataTable({
		"bPaginate": false,
		"bInfo": false,
		"bSort": true,
		"bSortClasses": false	
	});
}

function enterLab(){
	if ($(":checkbox").filter(":checked").length>1){
		alert("You can only enter in one lab!");
	}
	else if ($(":checkbox").filter(":checked").length<1){
		alert("Please, select one lab");
	}
	else{	
		var lab = $(":checkbox").filter(":checked").val();
		var value=lab.split(",",2);
		var html2='<div id="deleteDialog" title="Welcome">You are now in '+value[1]+' lab</div>';
			$('#container').append(html2);
			$('#deleteDialog').dialog();
	}
}

function pedirJSON(toList){
/* aqui estamos intentando hacer una peticion al servidor campus-cloud-server.rb para que nos de el JSON*/
            $.ajax({
                url: "/students/"+toList,
		type:"GET",
		dataType: 'json',
                success: mostrarJSON,
                error: function(response){
			var html2='<div id="createDialog" title="Sorry">'+response.responseText+'</div>';
			$('#container').append(html2);
			$('#createDialog').dialog({
   				close: pedirJSON(action)
				});	
		}
            });
}

function logout(){
	$.ajax({
                url: "/logout",
		type:"POST",
                success: showindex,
                error: function(){
			alert("error");
		}
            });	
}

function showindex(){
	window.location.href="/";
}

/* Aqui estamos diciendo mediante las funciones que nos permite la libreria jQuery ($) que al elemento con id login_btn cuando le hagamos click ejecute la funcion pedirJSON*/
$(document).ready(function(){
    $("#li_profile").click(function () {
	action="profile";
    });     
    $("#li_labs").click(function () {
      
    });
    $("#li_labs_list").click(function () {
        pedirJSON("list");
	action="list";
    });
    $("#logout").click(function () {
        logout();
    });
});
